<template>
  <div class="aui-page aui-page--full page-index">
    <main class="aui-page-main">
      <el-row :gutter="15">
        <el-col :span="16">
          <!-- 安全预警、安全防护、待办事项 -->
          <div class="index-section">
            <el-row :gutter="15">
              <el-col :span="10">
                <div class="aui-panel index-security-warning">
                  <div class="aui-panel__hd">我发起的流程跟踪</div>
                  <el-row :gutter="10" class="aui-panel__bd">
                    <el-col :span="8">
                      <div class="index-block">
                        <div class="index-block__bd"><em class="index-block__value">12</em></div>
                        <div class="index-block__hd">已处理</div>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="index-block">
                        <div class="index-block__bd"><em class="index-block__value">2</em></div>
                        <div class="index-block__hd">未处理</div>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="index-block">
                        <div class="index-block__bd"><em class="index-block__value">3</em></div>
                        <div class="index-block__hd">正在处理</div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="aui-panel index-security-protect">
                  <div class="aui-panel__hd">我的业务</div>
                  <div class="aui-panel__bd">
                    <div class="index-block index-block--level">
                      <div class="index-block__hd">待处理</div>
                      <div class="index-block__bd"><em class="index-block__value">0</em>件</div>
                    </div>
                    <div class="index-block index-block--level">
                      <div class="index-block__hd">已处理</div>
                      <div class="index-block__bd"><a href="#">查看详情</a></div>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="aui-panel index-undo">
                  <div class="aui-panel__hd">待办事项</div>
                  <div class="aui-panel__bd">
                    <a href="#" class="index-block index-block--level">
                      <div class="index-block__hd">按业务</div>
                      <div class="index-block__bd"><em class="index-block__value">5</em></div>
                    </a>
                    <a href="#" class="index-block index-block--level">
                      <div class="index-block__hd">按单位</div>
                      <div class="index-block__bd"><em class="index-block__value">2</em></div>
                    </a>
                    <a href="#" class="index-block index-block--level">
                      <div class="index-block__hd">其他</div>
                      <div class="index-block__bd"><em class="index-block__value">8</em></div>
                    </a>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <!-- 最近使用的产品 -->
          <div class="index-section">
            <div class="aui-panel index-recent">
              <div class="aui-panel__hd clearfix">
                <span>最近使用的菜单</span>
                <a href="#" class="f-right fz-xs">
                  <span class="va-middle">历史记录</span>
                  <svg class="icon-svg fz-base" aria-hidden="true"><use xlink:href="#icon-time-circle"/></svg>
                </a>
              </div>
              <div class="aui-panel__bd">
                <el-row :gutter="15">
                  <el-col :span="8">
                    <a href="#" class="index-block index-block--level">
                      <div class="index-block__bd">产品工厂</div>
                    </a>
                  </el-col>
                  <el-col :span="8">
                    <a href="#" class="index-block index-block--level">
                      <div class="index-block__bd">金融交易管理</div>
                    </a>
                  </el-col>
                  <el-col :span="8">
                    <a href="#" class="index-block index-block--level">
                      <div class="index-block__bd">账户控制</div>
                    </a>
                  </el-col>
                  <el-col :span="8">
                    <a href="#" class="index-block index-block--level">
                      <div class="index-block__bd">账户控制维护</div>
                    </a>
                  </el-col>
                  <el-col :span="8">
                    <a href="#" class="index-block index-block--level">
                      <div class="index-block__bd">账户信息查询</div>
                    </a>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
          <!-- 我的资源、我的消费、推荐返利 -->
          <div class="index-section">
            <div class="aui-panel index-personal">
              <div class="aui-panel__bd">
                <el-tabs v-model="indexPersonalTabsActive" class="aui-tabs">
                  <el-tab-pane class="index-product" label="菜单概览" name="1">
                    <el-row :gutter="15">
                      <el-col :span="8">
                        <dl class="index-product__list">
                          <dt>存款管理</dt>
                          <dd><a href="#">产品工厂</a></dd>
                          <dd><a href="#">账户管理</a></dd>
                          <dd><a href="#">金融交易管理</a></dd>
                          <dd><a href="#">控制/解控管理</a></dd>
                        </dl>
                        <dl class="index-product__list">
                          <dt>查询管理</dt>
                          <dd><a href="#">账户信息查询等</a></dd>
                        </dl>
                        <dl class="index-product__list">
                          <dt>资金集中与结算管理</dt>
                          <dd><a href="#">账户管理</a></dd>
                          <dd><a href="#">资金池管理</a></dd>
                          <dd><a href="#">收付款管理</a></dd>
                          <dd><a href="#">票据管理</a></dd>
                        </dl>
                      </el-col>
                      <el-col :span="8">
                        <dl class="index-product__list">
                          <dt>银行对账处理</dt>
                          <dd><a href="#">对账处理</a></dd>
                        </dl>
                        <dl class="index-product__list">
                          <dt>金融交易管理</dt>
                          <dd><a href="#">存款账户存入</a></dd>
                          <dd><a href="#">存款账户支取</a></dd>
                          <dd><a href="#存款账户">存款账户转帐</a></dd>
                          <dd><a href="#存款账户">定期及通知</a></dd>
                        </dl>
                      </el-col>
                      <el-col :span="8">
                        <dl class="index-product__list">
                          <dt>产品工厂</dt>
                          <dd><a href="#">产品维护</a></dd>
                          <dd><a href="#">产品拷贝</a></dd>
                        </dl>
                        <dl class="index-product__list">
                          <dt>账户管理</dt>
                          <dd><a href="#">账户开户</a></dd>
                          <dd><a href="#">账户销户</a></dd>
                          <dd><a href="#">账户变更</a></dd>
                        </dl>
                        <dl class="index-product__list">
                          <dt>协议管理</dt>
                          <dd><a href="#">协议存款设置及维护</a></dd>
                          <dd><a href="#">......</a></dd>
                        </dl>
                      </el-col>
                    </el-row>
                  </el-tab-pane>
                  <el-tab-pane class="index-consume" label="我的绩效" name="2">
                    <el-row :gutter="15">
                      <el-col :span="12">
                        <div class="index-consume__hd">业务办理概览</div>
                        <el-row :gutter="10" class="index-consume__bd">
                          <el-col :span="12">
                            <div class="index-block index-consume__block">
                              <div class="index-block__hd">业务办理总数</div>
                              <div class="index-block__bd"><em class="index-block__value">1208</em></div>
                              <div class="index-block__ft"><el-button type="primary">详情</el-button></div>
                            </div>
                          </el-col>
                          <el-col :span="12">
                            <a href="#" class="index-block index-block--level">
                              <div class="index-block__hd">时效内处理</div>
                              <div class="index-block__bd"><em class="index-block__value">589</em>件</div>
                            </a>
                            <a href="#" class="index-block index-block--level">
                              <div class="index-block__hd">提前处理</div>
                              <div class="index-block__bd"><em class="index-block__value">301</em>件</div>
                            </a>
                            <a href="#" class="index-block index-block--level">
                              <div class="index-block__hd">延期处理</div>
                              <div class="index-block__bd"><em class="index-block__value">9</em>件</div>
                            </a>
                          </el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="12">
                        <div class="index-consume__hd">近期处理情况</div>
                        <div class="index-consume__bd">
                          <div class="index-block index-consume__block">
                            <div class="index-block__hd">11 月概览</div>
                            <div class="index-block__bd"><em class="index-block__value">211</em></div>
                            <div class="index-block__ft">时效内处理<a href="#">198</a>件</div>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                  </el-tab-pane>
                  <!--<el-tab-pane class="index-ambassador" label="推荐返利" name="3">
                    <div class="index-ambassador__hd">
                      <h3 class="index-ambassador__title">推荐返利</h3>
                      <p class="index-ambassador__intro">成为云大使，即可享受推荐下单返利，推广任务奖励，云知识云技能培训等阿里云对云大使的多种支持。优秀者更可享受阿里云官方认证与阿里云参观学习等更多专项支持。</p>
                    </div>
                    <div class="index-ambassador__bd">
                      <el-row :gutter="15">
                        <el-col :span="12">
                          <div class="index-ambassador__item">
                            <svg class="index-ambassador__item-icon icon-svg" aria-hidden="true"><use xlink:href="#icon-gift-fill"/></svg>
                            <h4 class="index-ambassador__item-title">专享优厚回报</h4>
                            <p class="index-ambassador__item-intro">不但提供推广返利，更有任务奖金，排名大奖，大使折扣，新产品内测机会等专属奖励。</p>
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <div class="index-ambassador__item">
                            <svg class="index-ambassador__item-icon icon-svg" aria-hidden="true"><use xlink:href="#icon-trophy-fill"/></svg>
                            <h4 class="index-ambassador__item-title">与阿里云共同成长</h4>
                            <p class="index-ambassador__item-intro">阿里云将长期扶持云大使尤其是其中优秀者的长期发展，提供相应培训，能力认证等。</p>
                          </div>
                        </el-col>
                      </el-row>
                      <div class="index-ambassador__ft">
                        <el-button type="primary">立即加入</el-button>
                      </div>
                    </div>
                  </el-tab-pane>-->
                </el-tabs>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <!-- 公告 -->
          <div class="index-section">
            <div class="aui-panel index-notice">
              <div class="aui-panel__bd">
                <el-tabs v-model="indexNoticeTabsActive" class="aui-tabs aui-tabs--flex">
                  <el-tab-pane label="全部公告" name="1">
                    <ul class="index-notice__list">
                      <li><a href="#">20180102银行对资金全面管理与监督</a></li>
                      <li><a href="#">20180512关于利率调整公告 </a></li>
                      <li><a href="#">20181115假期放假通知 </a></li>
                    </ul>
                    <p class="index-notice__more"><a href="#">更多</a></p>
                  </el-tab-pane>
                  <el-tab-pane label="资金政策法规" name="2">
                    <ul class="index-notice__list">
                      <li><a href="#">2017资金政策法规</a></li>
                      <li><a href="#">2018资金政策法规</a></li>
                      <li><a href="#">2019资金政策法规</a></li>
                    </ul>
                    <p class="index-notice__more"><a href="#">更多</a></p>
                  </el-tab-pane>
                  <el-tab-pane label="安全" name="3">
                    <ul class="index-notice__list">
                      <li><a href="#">安全通知20180102</a></li>
                      <li><a href="#">安全通知20181102</a></li>
                      <li><a href="#">安全通知20181202</a></li>
                    </ul>
                    <p class="index-notice__more"><a href="#">更多</a></p>
                  </el-tab-pane>
                  <el-tab-pane label="通知" name="4">
                    <ul class="index-notice__list">
                      <li><a href="#">通知20180102</a></li>
                      <li><a href="#">通知20181102</a></li>
                      <li><a href="#">通知20181202</a></li>
                    </ul>
                    <p class="index-notice__more"><a href="#">更多</a></p>
                  </el-tab-pane>
                  <el-tab-pane label="其他" name="5">
                    <ul class="index-notice__list">
                      <li><a href="#">【其他】</a></li>
                      <li><a href="#">【异常】北京时间2018年10月25日</a></li>
                      <li><a href="#">【其他】</a></li>
                    </ul>
                    <p class="index-notice__more"><a href="#">更多</a></p>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
          <!-- 管理助手
          <div class="index-section">
            <div class="aui-panel index-assistant">
              <div class="aui-panel__hd clearfix">
                <span>管理助手</span>
                <a href="#" class="f-right fz-xs">查看更多</a>
              </div>
              <div class="aui-panel__bd">
                <div class="index-assistant__item">
                  <div class="index-assistant__item-hd">
                    <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-robot"/></svg>
                  </div>
                  <div class="index-assistant__item-bd">
                    <h4 class="index-assistant__item-title">双11巅峰钜惠</h4>
                    <p class="index-assistant__item-intro">云产品拼购1折起，拉新赢300万现金红包</p>
                    <el-button type="primary" plain size="mini">立即拼团</el-button>
                  </div>
                </div>
                <div class="index-assistant__item">
                  <div class="index-assistant__item-hd">
                    <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-instagram"/></svg>
                  </div>
                  <div class="index-assistant__item-bd">
                    <h4 class="index-assistant__item-title">2018广东云栖大会</h4>
                    <p class="index-assistant__item-intro">11月22日广州南丰朗豪酒店，报名进行中</p>
                    <el-button type="primary" plain size="mini">立即报名</el-button>
                  </div>
                </div>
                <div class="index-assistant__item">
                  <div class="index-assistant__item-hd">
                    <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-apartment"/></svg>
                  </div>
                  <div class="index-assistant__item-bd">
                    <h4 class="index-assistant__item-title">推荐好友送云服务器</h4>
                    <p class="index-assistant__item-intro">邀请好友7.1折起购短信包，即可获赠云服务器</p>
                    <el-button type="primary" plain size="mini">立即前往</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>-->
          <!-- 新产品快报 -->
          <div class="index-section">
            <div class="aui-panel index-information">
              <div class="aui-panel__hd">系统通知</div>
              <div class="aui-panel__bd">
                <ul class="index-information__list">
                  <li><strong>系统维护停机升级</strong>20180512</li>
                  <li><strong>系统维护停机升级</strong>新增菜单</li>
                  <li><strong>系统维护停机升级</strong>数据库备份</li>
                </ul>
                <p class="index-information__more"><a href="#">更多</a></p>
              </div>
            </div>
          </div>

          <!-- 定制资讯 -->
          <div class="index-section">
            <el-button class="aui-button--dashed index-btn__custom">
              <svg class="icon-svg fz-base" aria-hidden="true"><use xlink:href="#icon-time-circle"/></svg>
              <span class="va-middle">定制面板</span>
            </el-button>
          </div>
          <!-- 二维码 -->
          <div class="index-section">
            <div class="aui-panel index-code">
              <div class="aui-panel__bd">
                <div class="index-code__item">
                  <div class="index-code__item-inner">
                    <h4 class="index-code__item-title">司库管理系统</h4>
                    <p class="index-code__item-intro">司库管理的业务<br>包括金融市场、商业信贷、并购服务、集团年金、<br>财务运营和风险控制</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </main>
  </div>
</template>

<script>
export default {
  name: 'Pageindex',
  data() {
    return {
      indexPersonalTabsActive: '2',
      indexNoticeTabsActive: '1'
    }
  }
}
</script>

<style>
  .f-none {
    float:none!important
  }
  .f-left {
    float:left!important
  }
  .f-right {
    float:right!important
  }
  .w-auto {
    width:auto!important
  }
  .w-100 {
    width:100%!important
  }
  .h-auto {
    height:auto!important
  }
  .h-100 {
    height:100%!important
  }
  .mw-auto {
    width:auto!important
  }
  .mw-100 {
    max-width:100%!important
  }
  .mh-auto {
    height:auto!important
  }
  .mh-100 {
    max-height:100%!important
  }
  .m-auto {
    margin:auto!important
  }
  .mt-auto {
    margin-top:auto!important
  }
  .mr-auto {
    margin-right:auto!important
  }
  .mb-auto {
    margin-bottom:auto!important
  }
  .ml-auto {
    margin-left:auto!important
  }
  .mx-auto {
    margin-right:auto!important;
    margin-left:auto!important
  }
  .my-auto {
    margin-top:auto!important;
    margin-bottom:auto!important
  }
  .fz-xs {
    font-size:12px!important
  }
  .fz-sm {
    font-size:13px!important
  }
  .fz-base {
    font-size:14px!important
  }
  .fz-lg {
    font-size:16px!important
  }
  .fz-xl {
    font-size:18px!important
  }
  .fz-xxl {
    font-size:22px!important
  }
  .aui-page.page-index .index-block__bd,.aui-page.page-index .index-block__hd,.aui-page.page-index .index-consume__block .index-block__ft,.aui-page.page-index .index-information__list>li,.aui-page.page-index .index-notice__list>li,.t-truncate {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }

  .va-baseline {
    vertical-align:baseline!important
  }
  .va-top {
    vertical-align:top!important
  }
  .va-middle {
    vertical-align:middle!important
  }
  .va-bottom {
    vertical-align:bottom!important
  }
  .va-text-top {
    vertical-align:text-top!important
  }
  .va-text-bottom {
    vertical-align:text-bottom!important
  }
  .b-0 {
    border:0!important
  }
  .b-top-0 {
    border-top:0!important
  }
  .b-right-0 {
    border-right:0!important
  }
  .b-bottom-0 {
    border-bottom:0!important
  }
  .b-left-0 {
    border-left:0!important
  }
  .br-0 {
    border-radius:0!important
  }
  .br-circle {
    border-radius:50%!important
  }
  .bg-white {
    background-color:#fff!important
  }
  *,:after,:before {
    -webkit-box-sizing:border-box;
    box-sizing:border-box
  }

  [v-cloak] {
    display:none
  }
  .icon-svg {
    width:1em;
    height:1em;
    fill:currentColor;
    vertical-align:middle;
    overflow:hidden
  }
  .aui-button--dashed {
    border-style:dashed;
    background-color:transparent
  }
  .aui-button--dashed:focus,.aui-button--dashed:hover {
    background-color:transparent
  }

  .aui-panel {
    padding:15px;
    border-radius:4px;
    border:1px solid #ebeef5;
    background-color:#fff;
    opacity: .9;
  }
  .aui-panel__hd {
    margin-bottom:15px
  }
  .aui-panel__hd-other {
    font-size:12px
  }
  .aui-panel__hd-other>.icon-svg {
    font-size:14px
  }
  .aui-panel__bd {
    font-size:12px
  }
  .aui-tabs.el-tabs {
    position:relative
  }
  .aui-tabs.el-tabs>.el-tabs__header {
    margin-bottom:0
  }
  .aui-tabs.el-tabs>.el-tabs__header>.el-tabs__nav-wrap {
    margin-bottom:0
  }
  .aui-tabs.el-tabs>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-next,.aui-tabs.el-tabs>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-prev {
    line-height:38px
  }
  .aui-tabs.el-tabs>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.el-tabs__active-bar {
    display:none
  }
  .aui-tabs.el-tabs>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.el-tabs__item {
    padding:0 15px;
    vertical-align:inherit;
    -webkit-transition:background-color .3s;
    transition:background-color .3s
  }
  .aui-tabs.el-tabs>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.el-tabs__item:hover {
    color:#409EFF
  }
  .aui-tabs.el-tabs>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.el-tabs__item:after {
    position:absolute;
    bottom:0;
    left:50%;
    content:"";
    width:0;
    height:2px;
    background-color:#409EFF;
    -webkit-transition:left .3s cubic-bezier(.23,1,.32,1),width .3s cubic-bezier(.23,1,.32,1);
    transition:left .3s cubic-bezier(.23,1,.32,1),width .3s cubic-bezier(.23,1,.32,1)
  }
  .aui-tabs.el-tabs>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.el-tabs__item.is-active {
    color:#409EFF;
    background-color:#f5f7fa
  }
  .aui-tabs.el-tabs>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.el-tabs__item.is-active:after {
    left:0;
    width:100%
  }
  .aui-tabs.el-tabs>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.el-tabs__item>.icon-svg {
    font-size:16px
  }
  .aui-tabs.el-tabs>.el-tabs__content {
    padding:15px
  }
  .aui-tabs--flex.el-tabs>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    width:100%;
    text-align:center
  }
  .aui-tabs--flex.el-tabs>.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll>.el-tabs__nav>.el-tabs__item {
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1
  }
  .aui-page {
    position:relative;
    min-height:100vh;
    background-color:#f1f4f5;
    overflow:hidden;
    margin-left: 5px;
    margin-right: 8px;
  }
  .aui-page--full {
    min-height:auto;
    background-color:transparent;
    overflow:initial
  }
  .aui-page--full .aui-page-main {
    padding:0
  }
  .aui-page-header {
    position:relative
  }
  .aui-page-main {
    position:relative;
    padding:15px
  }
  .aui-page-footer {
    position:relative
  }
  .aui-page-footer p {
    margin:10px 0
  }
  .aui-page-footer a {
    padding:0 5px
  }
  .aui-page.page-index .index-section+.index-section {
    margin-top:15px;
  }
  .aui-page.page-index .index-block {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-flow:column wrap;
    flex-flow:column wrap;
    min-height:100%;
    padding:15px 10px;
    border:1px solid #f5f7fa;
    color:#303133;
    background-color:#f5f7fa;
    -webkit-transition:border-color .3s,background-color .3s;
    transition:border-color .3s,background-color .3s
  }
  .aui-page.page-index .index-block:hover {
    border-color:#409EFF;
    background-color:#fff
  }
  .aui-page.page-index .index-block__hd {
    min-width:60px;
    text-align:left
  }
  .aui-page.page-index .index-block__bd {
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    text-align:center
  }
  .aui-page.page-index .index-block__value {
    display:inline-block;
    vertical-align:middle;
    font-size:18px;
    font-style:normal;
    color:#c0c4cc
  }
  .aui-page.page-index .index-block+.index-block {
    margin-left:10px
  }
  .aui-page.page-index .index-block--level {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row nowrap;
    flex-flow:row nowrap;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
  }
  .aui-page.page-index .index-block--level+.index-block--level {
    margin-top:10px;
    margin-left:0
  }
  .aui-page.page-index .index-notice,.aui-page.page-index .index-security-protect,.aui-page.page-index .index-security-warning,.aui-page.page-index .index-undo {
    height:180px;
    overflow:hidden
  }
  .aui-page.page-index .index-security-warning {
    margin-right:-15px;
    border-right:0;
    border-radius:4px 0 0 4px
  }
  .aui-page.page-index .index-security-warning .index-block__hd {
    min-width:auto;
    line-height:26px;
    text-align:center
  }
  .aui-page.page-index .index-security-warning .index-block__bd {
    line-height:60px
  }
  .aui-page.page-index .index-security-warning .index-block__value {
    font-size:32px
  }
  .aui-page.page-index .index-security-protect {
    /*margin-left:-15px;*/
    border-left:0;
    border-radius:0 4px 4px 0
  }
  .aui-page.page-index .index-security-protect .index-block {
    line-height:22px
  }
  .aui-page.page-index .index-security-protect .index-block__bd {
    text-align:right
  }
  .aui-page.page-index .index-security-protect .index-block__value {
    margin-right:10px
  }
  .aui-page.page-index .index-undo .index-block {
    padding:7px 10px
  }
  .aui-page.page-index .index-undo .index-block+.index-block {
    margin-top:5px
  }
  .aui-page.page-index .index-notice {
    padding:0
  }
  .aui-page.page-index .index-notice__list {
    padding:0;
    margin:0;
    list-style:none
  }
  .aui-page.page-index .index-notice__list>li {
    line-height:24px;
    color:#606266
  }
  .aui-page.page-index .index-notice__list>li>a {
    color:#606266
  }
  .aui-page.page-index .index-notice__list>li>a:hover {
    color:#ef853a
  }
  .aui-page.page-index .index-notice__more {
    margin:15px 0 0
  }
  .aui-page.page-index .index-recent .aui-panel__bd {
    margin-top:-15px
  }
  .aui-page.page-index .index-recent .index-block {
    margin-top:15px
  }
  .aui-page.page-index .index-personal {
    padding:0
  }
  .aui-page.page-index .index-product {
    margin-top:-10px
  }
  .aui-page.page-index .index-product__list {
    margin:15px 0 0
  }
  .aui-page.page-index .index-product__list>dt {
    margin-bottom:10px;
    font-size:14px;
    font-weight:600
  }
  .aui-page.page-index .index-product__list>dd {
    margin-left:0;
    line-height:26px
  }
  .aui-page.page-index .index-product__list>dd>a {
    color:#606266
  }
  .aui-page.page-index .index-product__list>dd>a:hover {
    color:#ef853a
  }
  .aui-page.page-index .index-product__fold {
    display:block;
    padding:15px 0;
    margin:15px -15px -15px;
    text-align:center;
    border-top:1px solid #dcdfe6
  }
  .aui-page.page-index .index-consume__hd {
    font-size:14px;
    line-height:40px;
    text-align:center
  }
  .aui-page.page-index .index-consume .index-block {
    padding-top:10px;
    padding-bottom:10px
  }
  .aui-page.page-index .index-consume .index-block__hd {
    min-width:auto
  }
  .aui-page.page-index .index-consume .index-block__bd {
    text-align:left
  }
  .aui-page.page-index .index-consume .index-block__value {
    padding:0 5px;
    font-size:12px
  }
  .aui-page.page-index .index-consume__block:hover {
    border-color:#f5f7fa;
    background-color:#f5f7fa
  }
  .aui-page.page-index .index-consume__block .index-block__bd {
    margin-top:15px;
    line-height:38px;
    text-align:center
  }
  .aui-page.page-index .index-consume__block .index-block__value {
    font-size:26px
  }
  .aui-page.page-index .index-consume__block .index-block__ft {
    height:38px;
    margin:10px -10px -10px;
    line-height:38px;
    text-align:center;
    background-color:#e9ebee
  }
  .aui-page.page-index .index-consume__block .index-block__ft>.el-button {
    width:100%;
    height:100%;
    font-size:12px;
    border-radius:0
  }
  .aui-page.page-index .index-ambassador__hd {
    text-align:center
  }
  .aui-page.page-index .index-ambassador__title {
    margin:0;
    line-height:40px;
    font-size:14px;
    font-weight:400
  }
  .aui-page.page-index .index-ambassador__intro {
    margin:0;
    line-height:1.5
  }
  .aui-page.page-index .index-ambassador__bd {
    margin-top:15px
  }
  .aui-page.page-index .index-ambassador__item {
    position:relative;
    padding:15px 15px 15px 75px;
    line-height:1.5;
    background-color:#f5f7fa
  }
  .aui-page.page-index .index-ambassador__item-icon {
    position:absolute;
    top:50%;
    left:17.5px;
    margin-top:-20px;
    font-size:40px
  }
  .aui-page.page-index .index-ambassador__item-title {
    margin:0;
    line-height:30px
  }
  .aui-page.page-index .index-ambassador__item-intro {
    margin:0
  }
  .aui-page.page-index .index-ambassador__ft {
    margin-top:15px;
    text-align:center
  }
  .aui-page.page-index .index-assistant__item {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row nowrap;
    flex-flow:row nowrap;
    border:1px solid #ebeef5
  }
  .aui-page.page-index .index-assistant__item:hover {
    border-color:#409EFF
  }
  .aui-page.page-index .index-assistant__item+.index-assistant__item {
    margin-top:10px
  }
  .aui-page.page-index .index-assistant__item-hd {
    position:relative;
    width:60px;
    color:#c0c4cc;
    background-color:#f5f7fa
  }
  .aui-page.page-index .index-assistant__item-hd .icon-svg {
    position:absolute;
    top:50%;
    left:50%;
    font-size:40px;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%)
  }
  .aui-page.page-index .index-assistant__item-bd {
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    padding:10px 15px
  }
  .aui-page.page-index .index-assistant__item-title {
    margin:0;
    font-size:14px;
    font-weight:400
  }
  .aui-page.page-index .index-assistant__item-intro {
    margin:10px 0;
    line-height:1.5
  }
  .aui-page.page-index .index-information .aui-panel__hd {
    padding:0 15px;
    margin:-15px -15px 15px;
    line-height:46px;
    color:#606266;
    background-color:#f5f7fa
  }
  .aui-page.page-index .index-information__list {
    padding:0;
    margin:0;
    list-style:none
  }
  .aui-page.page-index .index-information__list>li {
    line-height:24px;
    color:#606266
  }
  .aui-page.page-index .index-information__list>li>a {
    color:#606266
  }
  .aui-page.page-index .index-information__list>li>a:hover {
    color:#ef853a
  }
  .aui-page.page-index .index-information__list>li>a>strong,.aui-page.page-index .index-information__list>li>strong {
    margin-right:5px
  }
  .aui-page.page-index .index-information__more {
    margin:10px 0 0
  }
  .aui-page.page-index .index-btn__custom {
    width:100%;
    color:#909399
  }
  .aui-page.page-index .index-code__item {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    line-height:1.5
  }
  .aui-page.page-index .index-code__item-img {
    float:left;
    width:100px;
    height:100px;
    margin-right:15px;
    /*background:url(../img/avatar.png) no-repeat;*/
    background-size:cover
  }
  .aui-page.page-index .index-code__item-title {
    margin:0;
    font-size:18px;
    font-weight:400
  }
  .aui-page.page-index .index-code__item-intro {
    margin:10px 0 0
  }

</style>
